<!-- 分类左边导航 -->
<template>
  <div class="nav-box">
    <div class="nav-conten">
      <van-tabs v-model="active" color="#1989fa" @click="onChange1">
        <van-tab :title="item.name" v-for="(item) in goodscate " :key="item.id">
          <van-tabs v-model="active1" color="#1989fa" @click="onChange2(item.children[active1].id)">
            <van-tab :title="childrens.name " v-for="(childrens,pid) in item.children" :key="pid">
              <van-tabs
                v-model="active2"
                @click="onChange3(childrens.children[active2].id,)"
                color="#1989fa"
              >
                <van-tab :title="i.name " v-for="(i,id) in childrens.children" :key="id">
                  <div class="rightnav">
                    <van-loading size="48px" vertical v-show="show">加载中......</van-loading>

                    <div v-if="!list" class="nodata">
                      <p>暂无相关商品数据...</p>
                    </div>
                    <div class="listBox" v-else>
                      <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                      >
                        <van-grid :column-num="2" icon-size="3.0rem">
                          <van-grid-item
                            v-for="(item,id) in list"
                            :key="id"
                            :icon="item.goods_logo"
                            :text="item.goods_title"
                            :info="`￥${item.selling_price}`"
                            @click="Details(item.id,item.goods_id)"
                          />
                        </van-grid>
                      </van-list>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      goodscate: {},

      active: 0,
      active1: 0,
      active2: 0,
      show: false,
      page: 1,
      infoId: "",
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    onLoad() {
      this.page++;
      let page = this.page;
      let id = this.infoId;
      console.log(page, id);
      this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id,
          page
        }
      }).then(res => {
        console.log(res, 13313131);
        this.finished = false;

        let rows = res.data.data;
        console.log(rows);
        this.loading = false;
        this.total = res.data.total;
        console.log(this.total);
        this.list = this.list.concat(rows);
        console.log(this.list);

        if (rows == null || rows.length < 20) {
          // 加载结束
          this.finished = true;
          return;
        }

        if (this.list.length >= this.total) {
          this.finished = true;
        }
      });
    },
    //第一导航条
    onChange1() {
      this.list = [];
      this.show = true;
      this.infoId = this.goodscate[this.active].children[
        this.active1
      ].children[0].id;
      let page = 1;
      console.log(this.infoId);
      this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id: this.infoId,
          page
        }
      })
        .then(res => {
          if (res.data.State.Code == 200) {
            this.finished = false;
            this.show = false;
            let rows = res.data.data;
            console.log(rows);
            this.loading = false;
            this.total = res.data.total;
            console.log(this.total);
            this.list = this.list.concat(rows);
            console.log(this.list);
            if (rows == "") {
              this.list = "";
            }
            if (rows == null || rows.length < 20) {
              // 加载结束
              this.finished = true;
              return;
            }

            if (this.list.length >= this.total) {
              this.finished = true;
            }
          } else if (res.data.State.Code == 2005) {
            this.show = false;
            this.list = "";
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //第二导航条
    onChange2(active1) {
      this.show = true;
      this.list = [];
      this.infoId = this.goodscate[this.active].children[
        this.active1
      ].children[0].id;
      console.log(this.infoId);

      let page = 1;
      this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id: this.infoId,
          page
        }
      })
        .then(res => {
          if (res.data.State.Code == 200) {
            this.show = false;
            this.finished = false;

            let rows = res.data.data;
            console.log(rows);
            this.loading = false;
            this.total = res.data.total;
            console.log(this.total);
            this.list = this.list.concat(rows);
            console.log(this.list);
            if (rows == "") {
              this.finally = true;
              return;
            }
            if (rows == null || rows.length < 20) {
              // 加载结束
              this.finished = true;
              return;
            }

            if (this.list.length >= this.total) {
              this.finished = true;
              return;
            }
          } else if (res.data.State.Code == 2005) {
            this.show = false;
            this.list = "";
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onChange3(id) {
      this.list = [];
      this.show = true;
      let page = 1;
      console.log("id:", id, "page:", page);
      this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id: id,
          page
        }
      })
        .then(res => {
          if (res.data.State.Code == 200) {
            this.show = false;
            this.finished = false;

            let rows = res.data.data;
            console.log(rows);
            this.loading = false;
            this.total = res.data.total;
            console.log(this.total);
            this.list = this.list.concat(rows);
            console.log(this.list);
            if (rows == "") {
              this.show = false;
              this.finished = true;
              return;
            }
            if (rows == null || rows.length < 20) {
              // 加载结束
              this.finished = true;
              return;
            }

            if (this.list.length >= this.total) {
              this.finished = true;
              return;
            }
          } else if (res.data.State.Code == 2005) {
            this.show = false;
            this.list = "";
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取分类数据
    getHome() {
      this.$http({
        method: "post",
        url: "index/index/apiIndex"
      })
        .then(res => {
          this.goodscate = res.data.data.goodscate;
          console.log(res.data.data.goodscate, "分类获取的数据");
        })
        .catch(err => {
          console.log(err);
        });
    },
    getHomeInfo() {
      let id = 19;
      let page = 1;
      this.$http({
        method: "post",
        url: "index/api/goodsByCateId",
        data: {
          id,
          page
        }
      }).then(res => {
        // this.show = false;
        let rows = res.data.data;
        console.log(rows);
        console.log(res.data, "请求数据为空");
        this.loading = false;
        this.total = res.data.total;

        console.log(this.total < res.data.per_page);
        if (this.total < res.data.per_page) {
          this.finished = true;
          this.list = this.list.concat(rows);
          console.log(this.list);
          return;
        }
        if (this.list.length >= this.total) {
          this.finished = true;
          return;
        }
      });
    },

    Details(id, pid) {
      console.log(id, pid);
      this.$router.push({
        name: "detail",
        query: {
          id: id,
          pid: pid
        }
      });
    }
  },
  mounted() {},
  created() {
    this.getHome();
    this.getHomeInfo();
  },
  watch: {
    page(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    },
    infoId(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    }
    // active2(newvalue, oldvalue) {
    //   console.log(newvalue, oldvalue);
    // }
  }
};
</script>
<style lang='scss' scoped>
.nav-box {
  position: absolute;
  top: 0rem;
  bottom: 1.3rem;
  left: 0;
  right: 0;
  .nav-conten {
    width: 100%;
    display: flex;
    flex-direction: column;
    // background-color: red;
    ul {
      li {
        width: 100%;
        height: 105px;
        color: black;
        font-size: 24px;
        text-align: center;
        line-height: 105px;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #999;
        span {
          text-align: center;
        }
      }
    }
  }
}
.active {
  background-color: red;
}
.rightnav {
  margin-bottom: 1.4rem;
}
.van-loading {
  display: block;
  width: 100%;
  height: 600px;
  text-align: center;
  padding-top: 170px;
  
}
.nodata {
  width: 100%;
  text-align: center;
  color: #ccc;
  letter-spacing: 0.1rem;
  font-size: 24px;
  line-height: 10rem;
}
</style>